import {Layout, Card, Button, Upload, Icon, message } from "antd";
import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './css/UploadFile.css'

const {Header, Content, Footer, Sider} = Layout;
const {Meta} = Card;

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

export default class UploadFile extends Component {
    files = new Array();

    state = {
        hasFile : false,
        loading: false,
        previewVisible: false,
        previewImage: '',
        fileList: [],
    };

    handleUploadClick = () => {

    };

    handleChange = ({ files }) => {
        this.setState({files});

        console.log(files);
    };

    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    };

    render() {
        let uploadButton;

        let newFile = (<div>
            <Icon type="plus" />
            <div className="ant-upload-text">Upload</div>
        </div>);

        if (this.state.hasFile) {
            uploadButton = <Button type="primary" className="submit" onClick={this.submit}>全部上传</Button>
        } else {
            uploadButton = <Button type="primary" className="submit" onClick={this.submit} disabled>全部上传</Button>
        }

        let fileListElement = [];

        for (let file of this.files) {
            fileListElement.push(
                <div>
                    <img src="plus" className="fileImage"/>
                    <div className="delete">删除</div>
                </div>
            );
        }

        return (
            <Layout>
                <Content className="parent">
                    <Card className="contentBox">
                        <Upload
                            name="avatar"
                            listType="picture-card"
                            showUploadList="false"
                            className="avatar-uploader"
                            onPreview={this.handlePreview}
                            onChange={this.handleChange}
                            >
                            {fileListElement}
                            {newFile}
                        </Upload>

                        {uploadButton}
                    </Card>
                </Content>
            </Layout>);
    };
}

